<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/uausl.css"/>
    <link rel="stylesheet" href="css/swiper.css"/>
    <title></title>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <div id="uausl_reserve">
        <header>
            <div class="header header-border">
                <div class="l"><i class="icon icon-arrowleft"></i></div>
                <div class="c">立即预订</div>
                <div class="r"></div>
            </div>
        </header>
        <div class="content">
            <div class="reserve_img">
                <div class="imgClu">
                    <img src="img/update/cw-cookuserback_02.jpg" alt=""/>
                </div>
                <div class="info m-list list-justify">
                    <div class="m-list-name">基础套餐</div>
                    <div class="m-list-inner clear">
                        <div class="fare fl">
                            <p><span class="label">￥</span><span class="price">199.00</span></p>
                            <p>服务费</p>
                        </div>
                        <div class="line fl"></div>
                        <div class="crowed fl">
                            <p class="p1">2-3 人</p>
                            <p class="p2">适用人数</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reserve_list">
                <div class="reserve_list_head">
                    <i class="reserve_i1"></i> <span>就餐时间</span>
                </div>
                <div class="reserve_list_box">
                    <div class="reserve_time">
                        <div class="day swiper-container">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide day_unit on">
                                    <span class="ches">今天</span><span>02月02日</span>
                                </div>
                                <div class="swiper-slide day_unit">
                                    <span class="ches">明天</span><span>02月03日</span>
                                </div>
                                <div class="swiper-slide day_unit">
                                    <span class="ches">后天</span><span>02月04日</span>
                                </div>
                                <div class="swiper-slide day_unit">
                                    <span class="ches">周五</span><span>02月05日</span>
                                </div>
                                <div class="swiper-slide day_unit">
                                    <span class="ches">周六</span><span>02月05日</span>
                                </div>
                                <div class="swiper-slide day_unit">
                                    <span class="ches">周日</span><span>02月05日</span>
                                </div>
                            </div>
                        </div>
                        <div class="hour">
                            <ul>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    11:00-11:30
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    11:30-12:00
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    12:00-12:30
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    12:30-13:00
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    13:00-13:30
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    13:30-14:00
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    17:00-17:30
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    17:30-18:00
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    18:00-18:30
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    18:30-19:00
                                </li>
                                <li class="choosebox adcli on">
                                    <i class="coi"></i>
                                    19:00-19:30
                                </li>
                                <li class="choosebox adcli">
                                    <i class="coi"></i>
                                    19:30-20:00
                                </li>

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reserve_list">
                <div class="reserve_list_head">
                    <i class="reserve_i2"></i> <span>食材准备</span>
                </div>
                <div class="reserve_list_box res_pd">
                    <div class="material">
                        <ul class="m-list list-justify">
                            <li class="adcli">
                                <div class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list1"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list11"></i>
                                    <span>代买食材</span>
                                </div>
                                <p><span class="showback">查看清单</span></p>
                            </li>
                            <li class="adcli">
                                <div class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list2"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list22"></i>
                                    <span>自备食材</span>
                                </div>
                                <p><span class="showback">查看清单</span></p>
                            </li>
                        </ul>
                    </div>

                </div>
            </div>
            <div class="reserve_list">
                <div class="reserve_list_head">
                    <i class="reserve_i3"></i> <span>备注留言</span>
                </div>
                <div class="reserve_list_box res_pd">
                    <div class="beizhu">
                        <div class="say_anything">
                            <span class="any">说点什么</span>
                            <input type="text" class="any_input" placeholder="输入您的口味偏好、个人忌口等"/>
                        </div>
                        <div class="other">
                            <ul class="m-list-block">
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list3"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list33"></i>
                                    <span>爱吃辣</span>
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list4"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list44"></i>
                                    <span>口味清淡</span>
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list5"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list55"></i>
                                    <span>需忌口</span>
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list6"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list66"></i>
                                    <span>有老人</span>
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list7"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list77"></i>
                                    <span>有小孩</span>
                                </li>
                                <li class="choosebox">
                                    <i class="coi"></i>
                                    <i class="reserve_i_list reserve_i_list_fal reserve_i_list8"></i>
                                    <i class="reserve_i_list reserve_i_list_suc reserve_i_list88"></i>
                                    <span>有病人</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reserve_list">
                <div class="reserve_list_head">
                    <i class="reserve_i4"></i> <span>地址</span>
                </div>
                <div class="reserve_list_box">
                    <div class="address">
                        <div class="m-list list-input">
                            <div class="m-list-inner">
                                <p class="p1"><span>兰草</span><span>18780194819</span></p>
                                <p class="p2">红星路一段35号A区2栋2单元</p>
                            </div>
                            <div class="m-list-name"><i class="icon icon-right1"></i></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="reserve_list">
                <div class="reserve_list_head">
                    <i class="reserve_i5"></i> <span>优惠券</span>
                </div>
                <div class="reserve_list_box">
                    <div class="price_card">
                        <div class="m-list list-input">
                            <div class="m-list-inner">
                                <p class="p1">满两百减20</p>
                                <p class="p2">-￥20.00</p>
                            </div>
                            <div class="m-list-name"><i class="icon icon-right1"></i></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="reserve_foot m-list list-justify">
            <div class="m-list-name">
                <span class="fu">￥</span><span class="pri">99.00</span><span class="youhui">已优惠￥20</span>

            </div>
            <div class="m-list-inner"><div class="cw-btn cw-btn1">立即预订</div></div>
        </div>
        <div class="uausl_dialog_back">
            <div class="uausl_dialog">
                <div class="close"><i class="icon icon-wrong"></i></div>
                <div class="re_list">
                    <div class="re_list_detail">
                        <h2>鱼香肉丝</h2>
                        <div class="fruit_list">
                            <ul class="clear">
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                            </ul>
                        </div>
                        <div class="relish">
                            豆瓣酱、姜葱蒜、白醋、香醋、料酒、酱油、盐、水淀粉、植物油
                        </div>
                    </div>
                    <div class="re_list_detail">
                        <h2>鱼香肉丝</h2>
                        <div class="fruit_list">
                            <ul class="clear">
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                            </ul>
                        </div>
                        <div class="relish">
                            豆瓣酱、姜葱蒜、白醋、香醋、料酒、酱油、盐、水淀粉、植物油
                        </div>
                    </div>
                    <div class="re_list_detail">
                        <h2>鱼香肉丝</h2>
                        <div class="fruit_list">
                            <ul class="clear">
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                                <li>
                                    <span class="name">瘦肉</span><span class="num">250g</span>
                                </li>
                            </ul>
                        </div>
                        <div class="relish">
                            豆瓣酱、姜葱蒜、白醋、香醋、料酒、酱油、盐、水淀粉、植物油
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/swiper.jquery.min.js"></script>
    <script src="js/pageEvent.js"></script>
    <script>
        var reserve_day = new Swiper('.day',{
            slidesPerView: 4,
            spaceBetween: 15
        });
        $('.adcli').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on');
        });
        $('.day .day_unit').on('click',function(){
            $(this).addClass('on').siblings().removeClass('on');
        });
        $('.beizhu li').on('click',function(){
            if($(this).hasClass('on')){
                $(this).removeClass('on')
            }else{
                $(this).addClass('on');
            }
        });
        // dialog
         dialog('.material .showback','.uausl_dialog_back','.close')

    </script>
</body>
</html>